<template>
  <a-modal
    title="确认知识库"
    :width="540"
    :visible="visible"
    :confirmLoading="mloading"
    :maskClosable="false"
    @ok="onClickOk"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="mloading">
      <div class="table__box">
        <div class="header__item">
          <div class="header__title">文件名</div>
          <div class="header__name">证据名称</div>
        </div>
        <div class="table__list">
          <div v-for="(item, idx) in list" :key="idx" class="table__item">
            <div class="table__title">{{ item.name }}</div>
            <div class="table__name">
              <a-input v-model="item.value" placeholder="请输入" />
            </div>
          </div>
        </div>
      </div>
    </a-spin>
  </a-modal>
</template>
<script>
import {
  addFileData
} from '@/api/handle'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },

    model: {
      type: Object,
      default: () => {}
    }
  },

  data () {
    return {
      mloading: false,
      list: []
    }
  },

  created () {
    const { list } = this.model || {}
    this.list = list
  },

  methods: {
    onClickOk () {
      const arr = []
      this.list.forEach(ele => {
        if (ele.value && ele.value.trim()) {
          arr.push({
            name: ele.name,
            value: ele.value
          })
        }
      })
      if (arr.length !== this.list.length) {
        this.$notification['info']({
          message: '提示',
          description: '证据名称不能为空哦',
          duration: 4
        })
      } else {
        const { uuid } = this.model || {}
        return addFileData({
          _uuid_: uuid,
          data: arr
        }).then((res) => {
          this.$notification['success']({
            message: '提示',
            description: res.msg,
            duration: 4
          })
          this.$emit('ok')
        }).catch((e) => {
          this.$notification['error']({
            message: '提示',
            description: e.msg,
            duration: 4
          })
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.table__box {
  padding: 0 30px;
}
.header__item {
  display: flex;
  margin-bottom: 16px;
  color: #888;
  .header__title {
    width: 40%;
    margin-right: 20px;
  }
  .header__name {
    flex-grow: 1;
  }
}
.table__list {
  .table__item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    .table__title {
      width: 40%;
      margin-right: 20px;
    }
    .table__name {
      flex-grow: 1;
    }
  }
}
</style>
